<template>
<div>
  <router-link to="/paomadeng">跳转</router-link>
  
  <button @click="changeData">修改数据</button>
  <div id="box">{{data}}</div>
</div>
</template>

<script>
// 创建阶段 （执行一次）create ： Vue实例创建的过程，绑定data， 初始化实例
// 挂载阶段 （执行一次）mount ： 解析渲染html到界面上
// 运行阶段 （多次执行）update ： 根据数据的变化，来进行页面的更新
// 销毁阶段 （执行一次）destroy ： 销毁掉组件，销毁掉页面

export default {
  name: "LifeCycle",
  data() {
    return {
      data:"初始值"
    }
  },
  methods: {
    changeData() {
      this.data += "-"
    }
  },

  beforeCreate() {
    // 最早执行的生命周期，data还没有初始化呢，获取不到data里的数据
    // 一般很少用，可以做一些页面的重定向（跳转到别的页面）
    console.log(this.data)
    console.log("创建之前")
  },
  created() {
    // VUE实例已经创建，data和methods已经创建出来了，最早可以操作data的位置，可以对data做一些初始化
    // 这个位置界面还没有渲染，操作不了界面元素
    console.log(document.getElementById("box"))
    console.log(this.data)
    console.log("创建之后")
  },
  beforeMount() {
    // 即将挂载DOM，操作data，操作不了dom，这个生命周期和created离的很近，很少使用
    console.log("挂在之前")
  },
  mounted() {
    // DOM挂载完成，最早可以操作DOM的地方，依赖DOM的操作，都可以放在这里
    console.log(document.getElementById("box"))
    console.log("挂载之后")
  },


  // 很少用，尽量别用
  beforeUpdate() {
    console.log("更新之前")
    // 数据更新之前，data的数据已经变化了，但是dom没更新
    console.log("界面上的数据："+document.getElementById("box").innerText)
    console.log("data上的数据："+this.data)
  },
  updated() {
    // data更新了，界面也已经渲染了
    console.log("更新之后")
    console.log("界面上的数据："+document.getElementById("box").innerText)
    console.log("data上的数据："+this.data)
  },

  beforeDestroy() {
    // 清除定时器，移除绑定事件
    console.log("销毁之前")
  },
  destroyed() {
    console.log("销毁之后")
  },
}
</script>

<style scoped>

</style>
